<template>
  <a-modal
    :width="1000"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 新建采购任务 </template>
    <div class="content">
      <div class="title-item">
        <div style="margin-left: 5%">任务信息 </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <a-form ref="InfoRef" :model="form.list" auto-label-width>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="任务单号：" label-col-flex="100px">
              <a-input
                placeholder="系统自动设置"
                v-model="form.list.number"
                allow-clear
                disabled
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="name"
              label="任务名称："
              label-col-flex="100px"
              required
            >
              <a-input
                placeholder="请输入任务名称"
                v-model="form.list.name"
                allow-clear
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="roleName"
              label-col-flex="100px"
              label="任务下达人："
            >
              <a-input
                placeholder="请输入任务下达人"
                v-model="form.list.createByName"
                allow-clear
                disabled
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24"> </a-row>
      </a-form>
    </div>
    <div style="padding: 20px 3%"
      ><tableTurn :table-data="getTaskData" ref="tableRef" :pagination="false">
        <!--  -->
        <a-table-column
          title="物料类型"
          data-index="materialName"
          :width="50"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="物料编号"
          data-index="number"
          :width="50"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="物料名称"
          data-index="name"
          :width="50"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="物料规格"
          data-index="spec"
          :width="50"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="采购单位"
          data-index="basicName"
          :width="50"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="需求数量"
          data-index="amount"
          :width="50"
          align="center"
        >
        </a-table-column>
        <a-table-column
          title="关联申请单"
          data-index="applyNumber"
          :width="50"
          align="center"
        >
          <template #cell="{ record }">
            <span
              style="
                width: 90%;
                height: 20px;
                overflow: hidden;
                display: -webkit-box;
              "
              >{{ record.applyNumber }}</span
            >
          </template>
        </a-table-column>
      </tableTurn>
    </div>
    <div style="padding: 20px 3%">
      <div>
        <a-space direction="vertical" fill>
          <div>备注：</div>
          <a-textarea
            v-model="form.list.description"
            placeholder="请输入备注"
            allow-clear
          />
        </a-space>
      </div>
    </div>
    <div class="content" style="margin-top: 20px">
      <div class="title-item">
        <div style="margin-left: 5%">任务执行人 </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <a-form ref="formRef" :model="form.list" auto-label-width>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="executeBy" label="执行人：" required>
              <a-select
                :style="{ width: '320px' }"
                placeholder="请输入任务执行人"
                v-model="form.list.executeBy"
              >
                <a-option
                  v-for="item in staffData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="priority" label="优先级：" required>
              <a-select
                v-model="form.list.priority"
                :style="{ width: '320px' }"
                placeholder="请输入任务优先级"
              >
                <a-option :value="1">低</a-option>
                <a-option :value="2">中</a-option>
                <a-option :value="3">高</a-option>
                <a-option :value="4">紧急</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="beginTime" label="交付日期" required>
              <a-date-picker
                v-model="form.list.beginTime"
                show-time
                :time-picker-props="{ defaultValue: '09:09:06' }"
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { useRouter } from 'vue-router';
  import { reactive, computed, ref, watchEffect } from 'vue';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import { postPurchasetaskList } from '@/api/buy-management/buy-task/index';

  const router = useRouter();
  const formRef = ref();
  const InfoRef = ref();
  const props = withDefaults(
    defineProps<{
      tableData: any;
      visible: boolean;
    }>(),
    {
      visible: false
    }
  );

  const userInfo: any = JSON.parse(sessionStorage.getItem('loginInfo'));

  const form = reactive({
    list: {
      number: '',
      name: '',
      description: '',
      createBy: userInfo.id,
      createByName: userInfo.name,
      executeBy: '',
      beginTime: '',
      priority: props.tableData[0].priority
    }
  });

  const staffData = ref();
  const getStaffInfo = async () => {
    const res = await GetPersonnelinformation({ page: 1, size: -1 });
    staffData.value = res.content.data;
  };
  getStaffInfo();
  //   const tableData = cloneDeep(props.tableData);

  const emit = defineEmits(['update:visible', 'addRoleEmit']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    }
  });

  const getTaskData = async () => {
    const res = await props.tableData;
    return Promise.resolve(res);
  };

  const rules = reactive({});
  const tableRef = ref();
  // 确定
  const handleOk = async () => {
    let [flag1, flag2] = [false, false];

    await InfoRef.value.validate((valid: any) => {
      if (valid === undefined) flag1 = true;
    });

    await formRef.value.validate((valid: any) => {
      if (valid === undefined) flag2 = true;
    });

    if (flag1 && flag2) {
      form.list.beginTime = new Date(form.list.beginTime).toJSON();
      props.tableData.forEach((item) => {
        item.planAmount = item.amount;
        delete item.id;
      });
      await postPurchasetaskList({
        ...form.list,
        taskProduct: props.tableData
      });
      router.push({ name: 'TaskPurchaseList' });
      modalVisible.value = false;
    } else {
      modalVisible.value = true;
    }
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
  const refresh = () => {
    tableRef.value.loadData();
  };

  defineExpose({ refresh });

  watchEffect(() => {
    if (modalVisible.value) {
      form.list = {
        number: '',
        name: '',
        description: '',
        createBy: userInfo.id,
        createByName: userInfo.name,
        executeBy: '',
        beginTime: '',
        priority: props.tableData[0].priority
      };
    }
  });

  //   watch(
  //     () => props.visible,
  //     (val) => {
  //       if (val) {
  //       }
  //     }
  //   );
</script>

<style scoped lang="less">
  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    .title-item {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: rgba(245, 247, 250, 1);
    }
  }
</style>
